import React from 'react';
import withHook from '../component/widthhook'
import './login.scss'
import axios from 'axios';
import  {Message}  from 'element-react';



class Swiper extends React.Component{
    constructor(props){
        super(props)
        this.state={
            num:'xiaotuxian001',
            pas:'123456',
            flag:false,
            name:'name1',
            zh:false,
            mm:false,
            mms:'mm'
        }
    }
    goBack(){
        this.props.to('/homeview')
    }
    zh(){
        this.setState({
            flag:false
        })
    }
    sm(){
        this.setState({
            flag:true
        })
    }
    num(e){
        this.setState({
            num:e.target.value
        })
    }
    pas(e){
        this.setState({
            pas:e.target.value
        })
    }
    login(){
        const {num , pas,} = this.state
        var zhanghao = /^[a-zA-Z](\w{5,19})$/;
        var A = zhanghao.test(num)
        var mima = /^\w{6,24}$/;
        var B = mima.test(pas)
        console.log(B);
        if(pas!==''&&num!==''){
            if(A&&B){
                axios.post('https://apipc-xiaotuxian-front.itheima.net/login',{account:num,password:pas}).then(res=>{
                    console.log(res);
                    if(res.data.msg==='操作成功'){
                        Message({
                            message: '登录成功',
                            type: 'success'
                          });
                        localStorage.setItem('token',JSON.stringify(res.data.result))
                        this.props.to('/homeview')
                    }
                })
            }else{
                this.setState({
                    mms:'mm3',
                    zh:true,
                    name:'name3',
                    mm:true
                })
            }
        }
    }
    numfocus(){
        this.setState({
            name:'name2',
            zh:false
        })
    }
    numblur(){
        const {num , pas,} = this.state
        var zhanghao = /^[a-zA-Z](\w{5,19})$/;
        var A = zhanghao.test(num)
        if(!A){
            this.setState({
                name:'name3',
                zh:true
            })
        }
    }
    mmfocus(){
        this.setState({
            name:'mm2',
            zh:false
        })
    }
    mmblur(){
        const {num , pas,} = this.state
        var mima = /^\w{6,24}$/;
        var B = mima.test(pas)
        if(!B){
            this.setState({
                mms:'mm3',
                mm:true
            })
        }
    }
    render(){
        const {num , pas,flag,name,zh,mms,mm} = this.state
        return(
            <div id="login">
                <div className="top">
                    <div className="container">
                        <div className="logo"></div>    
                        <h3 >欢迎登录</h3>
                        <span onClick={this.goBack.bind(this)}>进入官网首页<span></span></span>
                        
                    </div>
                </div>
            <div className="content">
                <div className="denglu">
                <nav>
                    <span onClick={this.zh.bind(this)}>账户登录</span>
                    <span onClick={this.sm.bind(this)}>扫码登录</span>
                </nav>
                {
                    !flag&&(
                    <div className='zh'>
                        <div className="toggle" >
                            <span ><i className="iconfont icon-msg"></i> 使用短信登录 </span></div>
                            <input className={name} value={num} onFocus={this.numfocus.bind(this)} onBlur={this.numblur.bind(this)} onChange={this.num.bind(this)} type="text" />
                            {zh&&<p className='zhanghao'>字母开头且6-20个字符</p>}
                            <input className={mms} value={pas} onFocus={this.mmfocus.bind(this)} onBlur={this.mmblur.bind(this)}  onChange={this.pas.bind(this)} type="password" />
                            {mm&&<p className="mima"> 密码6-24个字符</p>}
                        <div className="agree" >
                            <div className="xtx-checkbox" >
                            {/* <i className="iconfont icon-checked" ></i> */}
                            </div>
                            <span >我已同意</span>
                            <span >《隐私条款》</span>
                            <span >和</span>
                            <span >《服务条款》</span>
                        </div>
                        <button onClick={this.login.bind(this)}>登录</button>
                    </div>
                    )
                }
                {
                    flag&&(
                        <div className="sm">
                            <img src="http://erabbit.itheima.net/img/qrcode.5372a064.jpg" alt="" />
                            <p>打开<span>小兔鲜App</span>扫码登录</p>
                        </div> 
                    )
                }
               
            </div>
        </div>
    </div>
        )
    }
}
const QilinCompont= withHook(Swiper)
export default QilinCompont